import React, { Component } from 'react';
import { Form, Input, Select, Button } from 'antd';
import { Dispatch } from 'redux';
import { connect } from 'react-redux';

import { 
  EmployeeRequest, 
  UpdateCurEmployeeDept,
  UpdateCurEmployeeName,
  Name,
  Dept
} from '../../../interface/employee';
import { DEPARTMENT_INFO } from '../../../contants/utils'

import './index.less';

const { Option } = Select;

interface Props {
  onDataChange(data: EmployeeRequest): void;
  name: Name;
  departmentId: Dept;
  updateCurEmployeeName: UpdateCurEmployeeName;
  updateCurEmployeeDept: UpdateCurEmployeeDept;
}

class QueryForm extends Component<Props, {}, EmployeeRequest> {

  handleNameChange = (e: React.FormEvent<HTMLInputElement>) => {
    let { updateCurEmployeeName } = this.props, name = e.currentTarget.value;
    updateCurEmployeeName(name)
  }
  handleDepartmentChange = (value: number) => {
    let { updateCurEmployeeDept } = this.props;
    updateCurEmployeeDept(value)
  }
  handleSubmit = () => {
    this.queryEmployee();
  }
  componentDidMount() {
    this.queryEmployee();
  }
  queryEmployee =  () => {
    let { name, departmentId } = this.props;
    this.props.onDataChange({name, departmentId});
  }

  render() {
    const { name, departmentId } = this.props;
    const departmentList = DEPARTMENT_INFO.map((item, index) => <Option value={index} key={index}> { item } </Option>)
    return (
      <Form layout="inline" className="form-block">
        <Form.Item>
          <Input 
            placeholder="姓名"
            style={{ width: '100%' }}
            allowClear
            value={name}
            onChange={this.handleNameChange}
          />
        </Form.Item>
        <Form.Item>
          <Select
            placeholder="部门"
            style={{ width: '100%' }}
            allowClear
            value={departmentId}
            onChange={this.handleDepartmentChange}
          >
            { departmentList }
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={this.handleSubmit} size="large"> 查询 </Button>
        </Form.Item>

      </Form>
    )
  }
}

const mapStateToProps = (state: any) => {
  return {
    name: state.queryForm.name,
    departmentId: state.queryForm.departmentId
  }
}

const mapActionToProps = (dispatch: Dispatch) => {
  return {
    updateCurEmployeeName: (payload: Name) => dispatch({type: "UPDATE_CUREMPLOYEE_NAME", payload}), 
    updateCurEmployeeDept: (payload: Dept) => dispatch({type: "UPDATE_CUREMPLOYEE_DEPT", payload}) 
  }
}

export default connect(
  mapStateToProps,
  mapActionToProps
)(QueryForm);